<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>No.5 - 纯 CSS 制作绕中轴旋转的立方体</title>
</head>
<body>
<style>
	body{background: #000;color: #fff;text-align: center;}

	.stage{width: 200px;
		position: relative;top:200px;left: 50%;margin-left: -100px;
		perspective:300;-webkit-perspective:300;
	}
	.wrap{width: 200px;height:200px;
		  transform-style: preserve-3d;transform-origin:50% 0 -100px;
		  animation:rotate 8s infinite linear;
		  animation-play-state: paused;
		}
	.wrap:hover{ animation-play-state: running;}
	@keyframes rotate{
		0%{transform:rotateY(0deg);}
		50%{transform:rotateY(-180deg);}
		100%{transform:rotateY(-360deg);}
	}
	.wrap > div{
		position: absolute;
		width:200px;height:200px;
		background: #3496e84f;border: 3px solid #37c;
	}
	.wrap > div:nth-child(2){transform: translate3d(100px,0,-100px) rotateY(90deg);}
	.wrap > div:nth-child(3){transform: translate3d(0,100px,-100px) rotateX(-90deg);}
	.wrap > div:nth-child(4){transform: translate3d(-100px,0,-100px) rotateY(-90deg);}
	.wrap > div:nth-child(5){transform: translate3d(0,-100px,-100px) rotateX(90deg);}
	.wrap > div:nth-child(6){transform: translateZ(-200px);}
</style>
<div class="stage">
	<div class="wrap">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>
</div>
</body>
</html>
